<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI对话</title>
</head>
<link rel="stylesheet" href="../Common/Base.css">
<link rel="stylesheet" href="../Common/SideNavigation.css">
<link rel="stylesheet" href="./AIDialogue.css">

<body>
  <!-- 侧导航 -->
  <div class="side-nav">
    <ul>
      <li><a href="../templates/index.html">AI翻译</a></li>
      <li class="side-nav-active"><a href="#">AI问答</a></li>
      <li><a href="../HistoricalTran/HistoricalTran.html">历史翻译</a></li>
      <li><a href="https://gitee.com/Himi233/aitranslation.git" target="_blank">关于我们</a></li>
    </ul>
  </div>
  <!-- AI对话 -->
  <div class="wrapper">
    <div class="container">
      <div class="tab-area">
        <button class="tab-button active" data-target="current-chat">当前对话</button>
        <button class="tab-button" data-target="history-chat">历史对话</button>
      </div>
      <div class="charWrapper">
        <!-- 当前对话消息 -->
        <div class="chat-window current-chat" id="current-chat" data-target="current-chat">
        </div>
        <!-- 历史对话消息 -->
        <div class="chat-window history-chat" id="history-chat" data-targe="history-chat">
        </div>
      </div>
      <!-- 输入区域 -->
      <div class="input-area">
        <form action="/" method="post" class="input-area">
          <input class="input-text" type="text" name="question" placeholder="输入你的问题..." autocomplete="off"
            style="width: 400px;">
          <button type="submit">提交</button>
          <input type="file" class="file-input" style="display: none;" />
        </form>
      </div>
    </div>
  </div>
  </div>

  <script src="./AIDialogue.js"></script>
</body>

</html>